<template>
  <TableView
    ref="tableView"
    :table-attrs="{
      api: fetchList,
      descs: ['create_time'],
      dicOptions: [{ prop: 'status', dicType: 'purchaseapply_status' }]
    }"
    form-path="/asset/borrow/borrowForm/{id:-1}"
    :search-model="searchForm"
    :delete-api="batchDelete"
    :toolbar-attrs="{
      buttons: ['slot', { del: permissions.borrow_borrow_del, create: permissions.borrow_borrow_add }]
    }">
    <template #toolbar-button>
      <ToolbarButton
        v-if="permissions.borrow_borrow_export"
        type="primary"
        icon="el-icon-download"
        label="导出"
        @click="exportExcel()" />
      <ToolbarButton icon="el-icon-s-fold" type="primary" label="归还" @click="remand()" />
    </template>
    <template #columns>
      <TableColumn label="办理状态" prop="status" width="90" />
      <TableColumn label="类型" prop="type" width="90">
        <template #default="{ row }">
          <ElTag>{{ row.type === '0' ? '借用' : '归还' }}</ElTag>
        </template> </TableColumn
      >`
      <TableColumn label="借用单号" clickable prop="caseid" width="190" />
      <TableColumn label="借用人" prop="borrowName" width="80" />
      <TableColumn label="借用时间" prop="borrowTime" width="90">
        <template #default="{ row }">
          {{ $formatDate(row.borrowTime) }}
        </template>
      </TableColumn>
      <TableColumn label="预计归还时间" prop="forecastRemandTime" width="100">
        <template #default="{ row }">
          {{ $formatDate(row.forecastRemandTime) }}
        </template>
      </TableColumn>
      <TableColumn label="实际归还时间" prop="realRemandTime" width="100">
        <template #default="{ row }">
          {{ $formatDate(row.realRemandTime) }}
        </template>
      </TableColumn>
      <TableColumn label="借用说明" prop="explains" />
      <TableColumn label="借用明细" prop="detailed" />
    </template>
    <template #search-form>
      <FormSelect v-model="searchForm.status" dict-type="purchaseapply_status" label="办理状态" prop="status" />
      <FormRadioGroup
        v-model="searchForm.type"
        label="配套电梯"
        required
        prop="type"
        classic
        radio-type="radio"
        :options="[
          { label: '借用', value: '0' },
          { label: '归还', value: '1' }
        ]" />
      <FormInput v-model="searchForm.caseid" label="借用单号" prop="caseid" />
      <FormInput v-model="searchForm.borrowName" label="借用人" prop="borrowName" />
      <FormDatePicker v-model="searchForm.borrowTime" label="借用时间" :split="false" date-range prop="borrowTime" />
      <FormDatePicker
        v-model="searchForm.forecastRemandTime"
        label="预计归还时间"
        :split="false"
        date-range
        prop="forecastRemandTime" />
      <FormDatePicker
        v-model="searchForm.realRemandTime"
        label="预计归还时间"
        :split="false"
        date-range
        prop="realRemandTime" />
      <FormInput v-model="searchForm.cardName" label="资产名称" prop="cardName" />
      <FormInput v-model="searchForm.cardCode" label="资产编码" prop="cardCode" />
      <FormInput v-model="searchForm.barcode" label="商品条码" prop="barcode" />
      <FormInput v-model="searchForm.model" label="规格型号" prop="model" />
      <FormInput v-model="searchForm.amount" label="金额" prop="amount" />
      <FormInput v-model="searchForm.detailed" label="借用明细" prop="detailed" />
    </template>
  </TableView>
</template>

<script>
  import { mapState } from 'vuex'
  import { services } from '@/config'
  import { fetchList, batchDelete, remand } from '@/api/asset/borrow'

  export default {
    name: 'BorrowView',
    data() {
      return {
        searchForm: {
          status: '',
          type: '',
          caseid: '',
          borrowName: '',
          borrowTime: [],
          forecastRemandTime: [],
          realRemandTime: [],
          cardName: '',
          cardCode: '',
          barcode: '',
          model: '',
          detailed: '',
          amount: ''
        }
      }
    },
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      fetchList,
      batchDelete,
      //  导出excel
      exportExcel() {
        this.$downBlobFile(
          `${services.assetService}borrow/export`,
          this.searchForm,
          `借用&归还${this.$dateFormat(new Date())}.xlsx`
        )
      },
      async remand() {
        let selectRows = this.$refs.tableView.selectedRows
        if (selectRows.length === 0) {
          this.$message.warning('请选择所要归还的数据')
          return
        }
        selectRows = selectRows.filter(item => item.type === '0')
        if (selectRows.length === 0) {
          this.$message.warning('所选数据未包含借用类型数据')
          return
        }
        const ids = selectRows.map(item => item.id)
        this.$confirm(`是否确认归还${ids.length}条借用数据？`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await remand(ids)
          if (res.data.code === 0) {
            await this.$refs.tableView.onSearchClick()
            this.$message.success(res.data.msg ? '归还成功' : res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }
  }
</script>
